h<template>
  <div>
    <el-row
      type="flex"
      :gutter="20"
      style="padding-left: 1vw"
    >
      <el-col :span="23">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 2vh 0 0 2vw;"
        >
          <el-form-item>
            <div
              slot="label"
              style="color:white; font-size: 20px;"
            >
              监测点名：
            </div>
            <el-input v-model="searchTag" />
          </el-form-item>
          <el-form-item>
            <div
              slot="label"
              style="color:white; font-size: 20px;"
            >
              描述：
            </div>
            <el-input v-model="searchDescriptor" />
          </el-form-item>
          <el-button
            class="el-blue-button"
            @click="search()"
          >
            <i class="el-icon-search" /> &nbsp;查询
          </el-button>
          <el-button
            class="el-blue-button"
            @click="reset()"
          >
            <i class="el-icon-refresh-right" />&nbsp;重置
          </el-button>
          <!-- 计时器 -->
            <el-form-item>
            <div
              slot="label"
              style="color:white; font-size: 20px;margin-left:100px;"
            >
              计时器：
            </div>
              <el-input-number v-model="timeCount" :min="1"></el-input-number>
             <span style="color:white; font-size: 20px;margin-left:10px;margin-right:20px;">分钟</span>
          </el-form-item>
           <el-button
            class="el-blue-button"
            @click="setTime"
          >
            <i class="el-icon-check" />
          </el-button>
          <el-button
            class="el-blue-button"
            style="float: right;margin-right:10px"
            @click="addHandler()"
          >
            <i class="el-icon-plus" />&nbsp;新增
          </el-button>
        </el-form>
      </el-col>
    </el-row>
    <hr style="border-bottom: none;border-color: #8c939d">
    <br/>
<el-row style="margin: 0 3vw">
    <el-table
      :data="tagList"
      border
      style="width: 100%;padding:2vh"
    >
      <el-table-column
        prop="id"
        label="id"
        width="200"
        align="center"
      />
      <el-table-column
        prop="tag_name"
        label="监测点名称"
        align="center"
      />
      <el-table-column
        prop="descriptor"
        label="描述"
        align="center"
      />
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            class="el-blue-button"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deleteHandler(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        style="margin-top: 10px;float: right"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :current-page.sync="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
      />
</el-row>
    <el-dialog
      title="新增监测点"
      :visible.sync="dialogVisibleAdd"
      width="50%"
    >
        <div class="tagform-content">
          <el-form
            ref="addForm"
            :model="addForm"
            :rules="rules"
          >
            <el-form-item :label-width="formLabelWidth"
              prop="tag_name"
            >
            <span slot="label" class="form-title">
                监测点名称
            </span>
              <el-input
                v-model="addForm.tag_name"
                placeholder="请输入监测点名称"
              />
            </el-form-item>
          </el-form>
        </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          class="el-green-button"
          @click="submitAdd"
        >添加</el-button>
        <el-button class="el-red-button" @click="resetForm('addForm')">重置</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import request from '../../network/request'
export default {
  name: 'Index',
  data () {
    return {
      formLabelWidth: '120px',
      searchDescriptor: '', // 搜索值
      searchTag: '',
      timeCount: '',
      descriptorOld: '', // 原搜索值
      TagOld: '',
      dialogVisibleModify: false, // 修改弹出框
      dialogVisibleAdd: false, // 新增弹出框
      dialogVisibleUpdate: false, // 更新弹出框
      total: 0,
      currentPage: 1,
      pageSize: 8,
      addForm: {
        tag_name: ''
      },

      tagList: [
      ],
      /* tagList: [
        { id: 1, contains: 111, alarm_class: 1 },
        { id: 2, contains: 222, alarm_class: 2 }
      ], */

      rules: {
        tag_name: [
          { required: true, message: '请输入监测点名称', trigger: 'blur' }

        ]
      }
    }
  },
  created () {
    request({
      method: 'POST',
      url: '/dataOp/searchTagByPage',
      data: {
        filterMap: {
          descriptor: this.searchDescriptor,
          tag_name: this.searchTag
        },
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(r => {
      if (r.data.code === 200) {
        this.tagList = r.data.data.list
        this.total = r.data.data.total
        // console.log(this.tagList);
      } else if (r.data.code === 504) {
        this.tagList = []
        this.total = 0
        this.currentPage = 1
      }
    })
    request({
      url: '/dataOp/getKoujing',
      method: 'GET'
    }).then(res => {
      this.timeCount = res.data
      console.log(res)
    })
  },
  mounted () {
    this.getThreshold()
  },
  methods: {
    getThreshold () {
      request({
        url: '/dataOp/getKoujing',
        method: 'GET'
      }).then(res => {
        this.timeCount = res.data
      })
    },
    // 打开新增弹窗
    addHandler () {
      this.dialogVisibleAdd = true
    },
    reset () {
      this.searchDescriptor = ''
      this.searchTag = ''
    },
    setTime () {
      // 计时器
      request({
        method: 'POST',
        url: '/dataOp/updateKoujing',
        data: {
          koujing: this.timeCount
        }
      }).then(r => {
        if (r.data.code === 200) {
        } else if (r.data.code === 504) {
          alert('计时器设置出错')
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      request({
        method: 'POST',
        url: '/dataOp/searchTagByPage',
        data: {
          filterMap: {
            descriptor: this.descriptorOld,
            tag_name: this.TagOld
          },
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.tagList = r.data.data.list
          this.total = r.data.data.total
          // console.log(this.tagList);
        } else if (r.data.code === 504) {
          this.tagList = []
          this.total = 0
          this.currentPage = 1
        }
      })
    },
    updateDialog () {
      this.dialogVisibleUpdate = true
    },
    cancelUpdate () {
      this.dialogVisibleUpdate = false
    },

    // 增删改后重新获取列表
    getList () {
      this.currentPage = 1
      this.searchDescriptor = ''
      this.searchTag = ''
      this.descriptorOld = ''
      this.tagOld = ''
      request({
        method: 'POST',
        url: '/dataOp/searchTagByPage',
        data: {
          filterMap: {
            descriptor: this.searchDescriptor,
            tag_name: this.searchTag
          },
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.tagList = r.data.data.list
          this.total = r.data.data.total
          this.searchDescriptor = ''
          this.searchTag = ''
          // console.log(this.tagList);
        } else if (r.data.code === 504) {
          this.tagList = []
          this.total = 0
          this.currentPage = 1
        }
        // console.log(this.tagList);
      })
    },
    // 搜索按钮对应
    search () {
      this.descriptorOld = this.searchDescriptor
      this.tagOld = this.searchTag
      this.tagOld = this.searchTag
      this.currentPage = 1
      request({
        method: 'POST',
        url: '/dataOp/searchTagByPage',
        data: {
          filterMap: {
            descriptor: this.searchDescriptor,
            tag_name: this.searchTag
          },
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.tagList = r.data.data.list
          this.total = r.data.data.total
          // console.log(this.tagList);
        } else if (r.data.code === 504) {
          this.tagList = []
          this.total = 0
          this.currentPage = 1
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },

    // 删除监测点
    deleteHandler (item) {
      this.$alert('此操作将永久删除该监测点，是否继续?', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        request({
          method: 'POST',
          url: '/dataOp/deleteTag',
          data: {
            tag_name: item.tag_name,
            descriptor: item.descriptor,
            id: item.id
          }
        }).then(r => {
          if (r.data.code === 200) {
            this.searchDescriptor = ''
            this.searchTag = ''
            this.getList()
            this.$alert('删除监测点成功', '删除监测点', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          } else {
            this.$alert(r.data.message, '删除失败', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }
        })
      }).catch(() => {
      })
    },
    // 提交新增
    submitAdd () {
      request({
        method: 'POST',
        url: '/dataOp/insertTag',
        data: {
          tag_name: this.addForm.tag_name
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.searchDescriptor = ''
          this.searchTag = ''
          this.getList()
          this.$alert('新增监测点成功', '新增监测点', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
          this.dialogVisibleAdd = false
          this.addForm.tag_name = ''
        } else {
          this.$alert(r.data.message, '新增失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100);
/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
  background-color: #081327;
}
  .demo-form-inline {
    padding-top: 0.8vh;
  }
  .el-table{
    font-size: 20px;
  }
  >>>td .cell {
    /*margin-top: 3vh;*/
    margin: 1.8% 0;
  }
  .pagination {
    padding-top: 2vh;
    text-align: center;
  }
  /deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
    background-color: #081327;
  }
  >>>.el-pagination__total, >>>.el-pagination__jump{
    color: white;
  }
  >>> .el-pagination span {
    font-size: 18px;
  }
  >>>.number{
    color: #dddddd;
  }
  .tagform-content{
    padding: 20px;
    display: flex;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
  }
</style>
